<!-- 添加检测项目 -->
<template>
  <div id="dialog-container">
    <el-button type="primary" plain @click="dialogVisible = true">添加检测项目</el-button>
    <el-dialog v-dialogDrag :title="'添加检测项目'" :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="720px">
        <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;top:" @click="isFullScreen = !isFullScreen">
         <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
                                                                                                </button>
      <el-form :model="formData" :inline="true" size="small" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测类型：">
              <el-select v-model="formData.testType" filterable placeholder="请选择" style="width: 200px;" @change="showList">
              <el-option   :label="all" :value="' '"></el-option>
              <el-option v-for="item in typeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测项目：">
              <!-- <el-select v-model="formData.fieldName" filterable placeholder="请选择" style="width: 200px;" @change="changeName">
                <el-option v-for="item in formData.names" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select> -->
              <el-input v-model='formData.fieldName' @change='showList'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column prop="testTypeStr" label="检测类型" width=""></el-table-column>
        <el-table-column prop="testField.fieldName" label="检测项目" width=""></el-table-column>
      <!--  <el-table-column prop="testPartStr" label="检测位置" width=""></el-table-column>-->
        <el-table-column prop="standardName" label="标尺" width=""></el-table-column>
        <el-table-column prop="col1" label="下限" width=""></el-table-column>
        <el-table-column prop="operatorStr" label="条件" width=""></el-table-column>
        <el-table-column prop="col2" label="上限" width=""></el-table-column>
        <el-table-column prop="unit" label="单位" width=""></el-table-column>
        <el-table-column prop="decimalPoint" label="小数点" width=""></el-table-column>
        <el-table-column prop="remark" label="备注" width=""></el-table-column>
      </el-table>

       <el-row type="flex" justify="center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArr"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="verify">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTestFieldList,
  getFieldStandardList,
  getTypeList,
  getPositionList,
  getStandardCondition
} from "service/task";
import { getLableFromList } from "utils/common";
export default {
  watch: {
    dialogVisible() {
      if (this.dialogVisible) {
        this.showList();
      }
    }
  },
  mounted() {
    getTypeList().then(res => {
      this.typeList = res.data.result;
    });
    getPositionList().then(res => {
      this.positionList = res.data.result;
    });
    getStandardCondition().then(res => {
      this.conditionList = res.data.result;
    });
  },
  data() {
    return {
      typeList: [],
      dialogVisible: false,
      isFullScreen: false,
      positionList: [],
      conditionList: [],
      all: '全部',
      formData: {
        testType: "",

        fieldName: ""

        // testType: '',
        // testName: '',
        // standrad: '',
        // test_part: '',
        // standrad_name: '',
        // name: ''
      },
      pageSizeArr: [10, 20, 50, 100],
      isChangeType: false,
      isChangeName: false,
      currentPage: 1,
      pageSize: 10,
      pageTotal: 10,
      tableData: [],
      selectedVal: []
    };
  },
  methods: {
    // showList() {
    //   this.loading = true;
    //   // getFieldStandardList(this.formData).then(res => {
    //   //   this.tableData = res.data.result;
    //   //   if (this.tableData) {
    //   //     this.tableData.forEach(e => {
    //   //       if (e.testField) {
    //   //         e.testPartStr = getPositionList(
    //   //           this.positionList,
    //   //           e.testField.testPart
    //   //         );
    //   //         e.testTypeStr = getTypeList(this.typeList, e.testField.testType);

    //   //       }
    //   //     });
    //   //   }
    //   // });
    // },
    handleSizeChange(val) {
      this.pageSize = val;
      this.showList();
    },
    handleCurrentChange(val) {
         this.pageNumber = val;
        this.currentPage = val;
        this.showList();
    },
    handleSelectionChange(val) {
      // console.log(val)
      this.selectedVal = val;
    },
    addDtata() {
      this.formData.testType = this.selectedVal[0].test_type;
      this.formData.testName = this.selectedVal[0].field_name;
      this.formData.standrad = this.selectedVal[0].standrad;
      this.formData.test_part = this.selectedVal[0].test_part;
      this.formData.standrad_name = this.selectedVal[0].standrad_name;
    },
    verify() {
      this.$emit("testData", this.selectedVal);
      this.dialogVisible = false;
    },
    showList() {
      this.loading = true;
      getFieldStandardList({
        // this.axios.get('/system/testFieldList', {
        ...this.formData,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        sort: "num",
        order: "asc"
      }).then(res => {
        this.tableData = res.data.result.content;
        //  this.currentPage = res.data.result.pageable.pageNumber;
          this.pageSize = res.data.result.pageable.pageSize;
          this.pageTotal = res.data.result.totalElements;
        this.loading = false;
        if (this.tableData) {
          this.tableData.forEach(e => {
            e.operatorStr = getLableFromList(this.conditionList, e.operator);
            if (e.testField) {
              e.testPartStr = getLableFromList(
                this.positionList,
                e.testField.testPart
              );
              e.testTypeStr = getLableFromList(
                this.typeList,
                e.testField.testType
              );
            }
          });
        }
      });
    }
    // 检测类型
    // changeType(val) {
    //   this.isChangeType = true;
    //   if (this.isChangeType && this.isChangeName) {
    //     this.showList();
    //   }
    // },
    // // 检测项目
    // changeName(val) {
    //   this.isChangeName = true;
    //   if (this.isChangeType && this.isChangeName) {
    //     // console.log(999)
    //     this.showList();
    //   }
    // }
  }
};
</script>
